layui.use(['layer', 'echarts', 'element', 'count','topBar', 'backend', 'gateway'], function() {
    var $ = layui.jquery,
        layer = layui.layer,
        element = layui.element,
        count = layui.count,
        backend = layui.backend,
        gateway = layui.gateway,
        echarts = layui.echarts;

    gateway.init();

    gateway.on('afterBindwk', function (client_id) {
        backend.api.ajax({
            url : '/admin/index/joingroup',
            data : {group: 'onlineCount', client_id : client_id}
        }, function() {
            return false;
        });
    })

    gateway.on('onlineCount', function (data) {
        count.up("value1", {
            time: 1000,
            num: data.users,
            regulator: 50
        })
        count.up("value2", {
            time: 1000,
            num: data.clients,
            regulator: 50
        })
    });

    count.up("value3", {
        time: 4000,
        num: 634.43,
        bit: 2,
        regulator: 50
    })

    count.up("value4", {
        time: 4000,
        bit: 2,
        num: 373.23,
        regulator: 50
    })

    var echartsRecords = echarts.init(document.getElementById('echarts-records'), 'walden');

    var option = {
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            type: 'category',
            data: ['2019-01', '2019-02', '2019-03', '2019-04', '2019-05', '2019-06'],
            axisLine: {
                lineStyle: {
                    color: "#999"
                }
            }
        }],
        yAxis: [{
            type: 'value',
            splitNumber: 4,
            splitLine: {
                lineStyle: {
                    type: 'dashed',
                    color: '#DDD'
                }
            },
            axisLine: {
                show: false,
                lineStyle: {
                    color: "#333"
                },
            },
            nameTextStyle: {
                color: "#999"
            },
            splitArea: {
                show: false
            }
        }],
        series: [{
            name: '课时',
            type: 'line',
            data: [23, 60, 20, 36, 23, 85],
            lineStyle: {
                normal: {
                    width: 8,
                    color: {
                        type: 'linear',

                        colorStops: [{
                            offset: 0,
                            color: '#A9F387' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: '#48D8BF' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 10,
                    shadowOffsetY: 20
                }
            },
            itemStyle: {
                normal: {
                    color: '#fff',
                    borderWidth: 10,
                    /*shadowColor: 'rgba(72,216,191, 0.3)',
                    shadowBlur: 100,*/
                    borderColor: "#A9F387"
                }
            },
            smooth: true
        }]
    };
    echartsRecords.setOption(option);

    window.onresize = function() {
        echartsRecords.resize();
    }

});
